<template>
    <div id="all">
      <input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style">
      <div id="allmap"></div>
    </div>
</template>
<script>
import {MP} from '../baiduMap.js'
    export default {
       data(){
           return {
              //详细地址
               address_detail: null, 
               userlocation: {lng: "", lat: ""}
           }
       },
       mounted(){
           this.$nextTick(function () {
                   var th = this
                   // 创建Map实例
                    MP(th.ak).then(BMap => {
                          //在此调用api
                        var map = new BMap.Map("allmap");
                   // 初始化地图,设置中心点坐标，
                   var point = new BMap.Point(121.160724,31.173277); 
                   // 创建点坐标，汉得公司的经纬度坐标
                   map.centerAndZoom(point, 15);
                   map.enableScrollWheelZoom();
    
          //建立一个自动完成的对象
                    var ac = new BMap.Autocomplete({
                         "input": "suggestId" ,
                          "location": map
                    })
                   
                    var myValue
                    //鼠标点击下拉列表后的事件
                    ac.addEventListener("onconfirm", function (e) {    
                       var _value = e.item.value;
                       myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                       this.address_detail = myValue
                       setPlace();
                    });

                    function setPlace() {
                      //清除地图上所有覆盖物
                        map.clearOverlays();    
                        function myFun() {
                          //获取第一个智能搜索的结果
                            th.userlocation = local.getResults().getPoi(0).point;   
                            map.centerAndZoom(th.userlocation, 18);
                            //添加标注
                            map.addOverlay(new BMap.Marker(th.userlocation));   
                       }
                       
            //智能搜索
                        var local = new BMap.LocalSearch(map, {
                            onSearchComplete: myFun
                        });
                        local.search(myValue);
                        //测试输出坐标（指的是输入框最后确定地点的经纬度）
                        map.addEventListener("click",function(e){
                            //经度
                            console.log(th.userlocation.lng);
                            //维度
                            console.log(th.userlocation.lat);
                        })
                    }
                    })

                   
            })
        },
    }
</script>

<style scoped>
  #allmap {
    width: 500px;
    height: 500px;
  }
</style>